/* 全局容器：全屏居中，淡蓝背景 */
.container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f5f7fa; /* 浅灰蓝背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Inter', system-ui, sans-serif;
  /* 页面淡入动画 */
  animation: fadeIn 0.8s ease-in-out;
}

/* 卡片容器：白色主体，阴影增强层次感 */
.card {
  width: 90%;
  max-width: 600px;
  padding: 4rem 2rem;
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(22, 93, 255, 0.08); /* 淡蓝阴影 */
  text-align: center;
  transition: transform 0.3s ease;
}

/* 卡片 hover 轻微上浮（增强交互感） */
.card:hover {
  transform: translateY(-5px);
}

/* 主标题：深蓝色，加粗 */
.title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #165DFF; /* 主蓝色 */
  margin-bottom: 1rem;
}

/* 副标题：灰色，柔和提示 */
.subtitle {
  font-size: 1.1rem;
  color: #64748b; /* 中灰色 */
  margin-bottom: 2.5rem;
  line-height: 1.6;
}

/* 进入主页按钮：蓝色渐变，圆角 */
.enterBtn {
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #165DFF 0%, #0F48D9 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
}

/* 按钮 hover 效果：深色加深，阴影扩大 */
.enterBtn:hover {
  background: linear-gradient(135deg, #0F48D9 0%, #0A36A8 100%);
  box-shadow: 0 6px 16px rgba(22, 93, 255, 0.3);
  transform: scale(1.03);
}

/* 按钮 active 效果：按压反馈 */
.enterBtn:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(22, 93, 255, 0.2);
}

/* 装饰图标：淡蓝色，辅助视觉 */
.decorIcon {
  width: 80px;
  height: 80px;
  margin-bottom: 2rem;
  color: #165DFF;
  opacity: 0.8;
}

/* 1. 顶部渐变分隔线（淡蓝→白色，居中显示） */
.decorLine {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #165DFF, #E6F0FF);
  border-radius: 2px;
  margin: 0 auto 2rem; /* 居中 + 与标题间距 */
}

/* 2. 标题旁小图标（淡蓝色，与文字对齐） */
.titleIcon {
  color: #165DFF;
  margin-right: 0.5rem;
  font-size: 1.5rem;
  vertical-align: middle; /* 与文字垂直居中 */
}

/* 3. 副标题前小点点缀（淡蓝小圆圈） */
.subtitleDot {
  color: #165DFF;
  font-size: 0.8rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* 4. 卡片背景装饰1（左上角淡蓝圆形，低透明度+缓慢浮动） */
.bgDecor1 {
  position: absolute;
  top: -20px;
  left: -20px;
  width: 80px;
  height: 80px;
  background-color: rgba(22, 93, 255, 0.05);
  border-radius: 50%;
  z-index: 0; /* 置于内容下方，不遮挡 */
  /* 柔和浮动动画 */
  animation: bgFloat 8s ease-in-out infinite alternate;
}

/* 5. 卡片背景装饰2（右下角淡蓝椭圆形，低透明度+反向浮动） */
.bgDecor2 {
  position: absolute;
  bottom: -30px;
  right: -30px;
  width: 120px;
  height: 60px;
  background-color: rgba(22, 93, 255, 0.05);
  border-radius: 50%;
  z-index: 0;
  /* 与装饰1反向浮动，增加动态感 */
  animation: bgFloat 10s ease-in-out infinite alternate-reverse;
}

/* 背景装饰浮动动画关键帧 */
@keyframes bgFloat {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(15px, 15px);
  }
}

/* 6. 按钮内箭头图标（与文字间距，小尺寸） */
.btnIcon {
  margin-left: 0.5rem;
  font-size: 0.9rem;
  transition: transform 0.3s ease; /*  hover 时轻微位移 */
}

/* 按钮 hover 时，图标轻微右移 */
.enterBtn:hover .btnIcon {
  transform: translateX(3px);
}

/* 7. 底部版本提示文字（浅灰色，小字体） */
.versionText {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: #94a3b8; /* 浅灰色，不抢焦点 */
  opacity: 0.8;
}

/* 响应式适配：小屏幕下调整装饰元素大小 */
@media (max-width: 480px) {
  .bgDecor1 {
    width: 60px;
    height: 60px;
    top: -15px;
    left: -15px;
  }
  .bgDecor2 {
    width: 90px;
    height: 45px;
    bottom: -20px;
    right: -20px;
  }
  .titleIcon {
    font-size: 1.2rem;
  }
  .versionText {
    margin-top: 2rem;
    font-size: 0.8rem;
  }
}

/* 淡入动画关键帧 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 响应式：小屏幕适配 */
@media (max-width: 480px) {
  .card {
    padding: 3rem 1.5rem;
  }
  .title {
    font-size: 1.8rem;
  }
  .subtitle {
    font-size: 1rem;
  }
  .enterBtn {
    padding: 0.8rem 2rem;
    font-size: 0.9rem;
  }
  .decorIcon {
    width: 60px;
    height: 60px;
  }
}